<template>
  <a class="mc-a" :href="hrefVal" :target="target" v-bind="$attrs" v-on="$listeners" @click="click"><slot></slot></a>
</template>

<script>
export default {
  name: 'mc-a',
  data () {
    return {
        hrefVal:""
    }
  },
  //暂时预定10个参数 大部分用户2-3个就够了
  props: ['url','target','mck1','mcv1','mck2','mcv2','mck3','mcv3','mck4','mcv4','mck5','mcv5','mck6','mcv6','mck7','mcv7','mck8','mcv8','mck9','mcv9','mck10','mcv10'],
  mounted () {
     if(window.iframeUi){
        this.hrefVal ="javascript:{}";
        //布局器中无法跳转
        return;
     }
     this.buildUrl();
  },
  //监听下变更 再动态修改url 经常会出现 绑定了输入框的值
  watch:{
    mcv1(val){
        this.buildUrl();
    },
    mcv2(val){
        this.buildUrl();
    },
    mcv3(val){
        this.buildUrl();
    },
     mcv4(val){
        this.buildUrl();
    },
    mcv5(val){
        this.buildUrl();
    },
    mcv6(val){
        this.buildUrl();
    },
    mcv7(val){
        this.buildUrl();
    },
    mcv8(val){
        this.buildUrl();
    },
    mcv9(val){
        this.buildUrl();
    },
    mcv10(val){
        this.buildUrl();
    },
  },
  methods:{
      buildUrl(){
        if(this.url){
              this.hrefVal = this.url;
              var params = [];
              if(this.isNotBlank(this.mck1) && this.isNotBlank(this.mcv1)){
                  params.push(this.mck1+"="+this.mcv1);
              }
             if(this.isNotBlank(this.mck2) && this.isNotBlank(this.mcv2)){
                  params.push(this.mck2+"="+this.mcv2);
              }
             if(this.isNotBlank(this.mck3) && this.isNotBlank(this.mcv3)){
                  params.push(this.mck3+"="+this.mcv3);
              }
             if(this.isNotBlank(this.mck4) && this.isNotBlank(this.mcv4)){
                  params.push(this.mck4+"="+this.mcv4);
              }
             if(this.isNotBlank(this.mck5) && this.isNotBlank(this.mcv5)){
                  params.push(this.mck5+"="+this.mcv5);
              }
             if(this.isNotBlank(this.mck6) && this.isNotBlank(this.mcv6)){
                  params.push(this.mck6+"="+this.mcv6);
              }
             if(this.isNotBlank(this.mck7) && this.isNotBlank(this.mcv7)){
                  params.push(this.mck7+"="+this.mcv7);
              }
             if(this.isNotBlank(this.mck8) && this.isNotBlank(this.mcv8)){
                  params.push(this.mck8+"="+this.mcv8);
              }
             if(this.isNotBlank(this.mck9) && this.isNotBlank(this.mcv9)){
                  params.push(this.mck9+"="+this.mcv9);
              }
             if(this.isNotBlank(this.mck10) && this.isNotBlank(this.mcv10)){
                  params.push(this.mck10+"="+this.mcv10);
              }
             if(params.length>0){
                   if(this.hrefVal.indexOf("?")!=-1){
                     this.hrefVal += "&"+params.join("&");
                   }else {
                     this.hrefVal += "?"+params.join("&");
                   }
              }
         }
      },
      isNotBlank(val){
          return typeof val != 'undefined' && val!==null && val !== '' && (val+"").replace(/^\s+|\s+$/g, '') !=="";
      },
      endsWith:function(val,suffix){
        return val.slice(-1*suffix.length) === suffix;
      },
      click(){
         if(window.iframeUi){
            this.$message({type:"warning",message:"设计阶段不支持跳转，可在预览时体验"})
            return false;
         }
      }
  }
}
</script>

<style lang="scss">
  .mc-button-a{
    padding: 6px 10px;
    display: inline-block;
    background: rgb(51, 193, 130);
    border-radius: 2px;
    text-decoration-line: none;
    font-size: 12px;
    font-family: PingFangSC-Medium, "PingFang SC";
    font-weight: 500;
    color: rgb(255, 255, 255);
    line-height: 20px;
    text-align: center;
  }
</style>
